<html>
    <input id=foo type=checkbox>
    <label for=foo>Checkbox 1 (with a "for" attribute)</label>
    <pre id=foo-status></pre>

    <label>
        <input id=bar type=checkbox>
        Checkbox 2 (inside a label element)
    </label>
    <pre id=bar-status></pre>

    <script>
        var foo = document.getElementById("foo");
        var fooStatus = document.getElementById("foo-status");
        fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;

        var bar = document.getElementById("bar");
        var barStatus = document.getElementById("bar-status");
        barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;

        foo.addEventListener("change", function() {
            fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
        });

        bar.addEventListener("change", function() {
            barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
        });
    </script>
</html>
